<!--
 * @Author: zhangmengqiong
 * @Date: 2021-05-12 14:18:00
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-05-13 13:25:19
-->
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=DVPI4kwxgMqXDrTx483rHkB7c3KDRyPp"
    ></script>
    <!-- 封装好的方法 -->
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <!-- 根据城市名称获取坐标 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.min.js"></script>
    <title>百度地图散点图</title>
    <style type="text/css">
      html {
        width: 100%;
        height: 100%;
      }
      body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #map_container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map_container"></div>
    <script type="text/javascript">
      const map = initMapFun();
      const data = initData();
      setData(map, data);
      // 初始化百度地图
      function initMapFun() {
        const cityCenter = mapv.utilCityCenter.getCenterByCityName('厦门');
        var map = initMap({
          center: [cityCenter.lng, cityCenter.lat],
          zoom: 6,
          tilt: 0,
          style: snowStyle,
        });
        return map;
      }

      // 准备数据源
      function initData() {
        var citys = [
          '厦门',
          '天津',
          '上海',
          '重庆',
          '石家庄',
          '太原',
          '呼和浩特',
          '哈尔滨',
          '长春',
          '沈阳',
          '济南',
          '南京',
          '合肥',
          '杭州',
          '南昌',
          '福州',
          '郑州',
          '武汉',
          '长沙',
          '广州',
          '南宁',
          '西安',
          '银川',
          '兰州',
          '西宁',
          '乌鲁木齐',
          '成都',
          '贵阳',
          '昆明',
          '拉萨',
          '海口',
        ];
        var data = [];
        var randomCount = 200; // 一起准备200个点，拿到城市的坐标进行偏移
        while (randomCount--) {
          // 获取坐标,随机获取坐标
          var cityCenter = mapv.utilCityCenter.getCenterByCityName(
            citys[parseInt(Math.random() * citys.length, 10)]
          );
          data.push({
            geometry: {
              // 地理信息
              type: 'Point',
              coordinates: [
                cityCenter.lng - 2 + Math.random() * 4, // 坐标随机
                cityCenter.lat - 2 + Math.random() * 4,
              ],
            },
            properties: {
              // 销售数据，将点和数据结合
              count: Math.random() * 40,
            },
          });
        }
        console.log(data, 'data---');
        // 只展示数据大于50的点
        data = data.filter(item => item.properties.count > 30);
        return data;
      }

      // 绘制数据源
      /*
      *1,生成mapvgl 视图view
      2,初始化mapvgl 的 Point 对象
      3，降Point对象 加入到view
      4,将data 与Point 对象进行绑定
      */
      function setData(map, data) {
        // 1,第一步 创建MapVGL图层管理器
        var view = new mapvgl.View({ map });
        // 2.初始化 Intensity 对象 控制点的大小和颜色
        var intensity = new mapvgl.Intensity({
          min: 0,
          max: 100,
          minSize: 5,
          maxSize: 50,
          gradient: {
            // 颜色渐变色
            0: 'rgb(25, 66, 102, 0.8)',
            0.3: 'rgb(145, 102, 129, 0.8)',
            0.7: 'rgb(210, 131, 137, 0.8)',
            1: 'rgb(248, 177, 149, 0.8)',
          },
        });
        // 3. 创建点可视化图层创建，并添加到图层管理器中
        var pointLayer = new mapvgl.PointLayer({
          // color: 'rgba(50, 50, 200, 1)',
          blend: 'lighter',
          // size: 10,
          size: function (item) {
            // 根据数据随机大小
            // return item.properties.count;
            return intensity.getSize(item.properties.count);
          },
          color: function (item) {
            // 随机颜色
            return intensity.getColor(item.properties.count);
          },
        });
        // 4,加入
        view.addLayer(pointLayer);
        // 5. 关联图层与数据，享受震撼的可视化效果
        pointLayer.setData(data);
      }
    </script>
  </body>
</html>
